<div id="time_{{ widget.name }}">
    <input name="{{ widget.name }}" :value="value_text" type="hidden">
    <el-time-picker
            v-model="value"
            align="center"
            :is-range="isRange"
            :arrow-control="isArrowControl"
            :readonly="isReadOnly"
            :picker-options="pickerOptions"
            @change="handleChange"
            start-placeholder="开始时间"
            end-placeholder="结束时间"
            range-separator="至"
            name="{{ widget.name }}"
    >
    </el-time-picker>
    <script>
        let value = null
        {% if widget.value_list %}
            value = [new Date(0, 0, 0, {{widget.value_list.0.0}}, {{widget.value_list.0.1}}), new Date(0, 0, 0, {{widget.value_list.1.0}}, {{widget.value_list.1.1}})]
        {% else %}
            value = [new Date(0, 0, 0, 8, 0), new Date(0, 0, 0, 20, 0)];
        {% endif %}

        new Vue({
            el: '#time_{{ widget.name }}',
            data: {
                value_text: '{% if widget.value %}{{ widget.value }}{% else %}08:00:00 - 20:00:00{% endif %}',
                value: value,
                isRange: true,
                isArrowControl: false,
                isReadOnly: false,
                pickerOptions: {
                    format: 'HH:mm:ss',
                },
            },
            methods: {
                fix(value) {
                    if (value.length < 2) {
                        return '0' + value
                    }
                    return value
                }
                ,
                handleChange: function () {
                    if (this.value[0] && this.value[1]) {
                        let left_hours = this.fix(this.value[0].getHours().toString())
                        let left_minutes = this.fix(this.value[0].getMinutes().toString())
                        let left_seconds = this.fix(this.value[0].getSeconds().toString())
                        let right_hours = this.fix(this.value[1].getHours().toString())
                        let right_minutes = this.fix(this.value[1].getMinutes().toString())
                        let right_seconds = this.fix(this.value[1].getSeconds().toString())
                        this.value_text = `${left_hours}:${left_minutes}:${left_seconds} - ${right_hours}:${right_minutes}:${right_seconds}`
                    }
                }
            }
        })
        ;
    </script>
</div>
